<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <link rel="stylesheet" href="/css/main.css" type="text/css">
</head>
<body>
<div id="container">
    <div id="main"></div>
</div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let bg = '';
    let bgImg = new Image();
    bgImg.src = bg;
    let option = {
        backgroundColor: "#101736",
        title: {
            text: '百分比',
            x: '50%',
            y: 30,
            textAlign: 'center',
            textStyle: {
                align: 'center',
                color: '#707b90',
                fontSize: 30,
                fontWeight: '100',
            },
        },
        tooltip: {},
        legend: { show: false, },
        xAxis: {
            type: 'category',
            data: [],
            axisLine: {
                lineStyle: {
                    color: '#79a5a5',
                    width: '5',
                }
            },
            axisTick: {
                alignWithLabel: true
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#79a5a5'
                }
            },
            axisLabel: {
                color: '#fff',
                fontSize: 16
            },
        },
        yAxis: {
            type: 'value',
            name: '',
            splitLine: {
                lineStyle: {
                    color: '#79a5a5'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#79a5a5',
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#79a5a5',
                }
            },
            axisLabel: {
                show: true,
                formatter: '{value} %',
                textStyle: {
                    color: '#79a5a5',
                    fontSize:16
                }
            },
            min: 0,
            max: 100,
        },
        grid: {
            left: 15,
            bottom: 30,
            top: 100,
            right: 30,
            containLabel: true
        },
        series: [{
            name: 'H',
            data: [],
            type: 'line',
            symbol: 'image://',
            symbolSize: [30, 50],
            symbolOffset: ['0', '25'],
            symbolRotate: 0,
            label: {
                show:true,
                fontSize:18
            },
            lineStyle: {
                color: '#4bfffc',
                shadowColor: 'rgba(0,0,0,0.3)',
                shadowBlur: 2,
                shadowOffsetX: 5,
                shadowOffsetY: 5,
            },
            itemStyle: {
                color: ({
                            data
                        }) => {
                    if (data <= 60) {
                        return '#f00'
                    }
                    return '#4bfffc'
                }
            },
            markLine: {
                symbol: 'none',
                data: [
                    [{
                        value: 60,
                        lineStyle: {
                            color: '#80e000',
                        },
                        label: {
                            color: '#e7fd9b',
                            textShadowColor: '#37a300',
                            textShadowBlur: '0',
                            textShadowOffsetX: 1,
                            textShadowOffsetY: 1,
                            position: 'middle',
                            formatter: '{c} %',
                            backgroundColor: '#80e000',
                            shadowColor: 'rgba(0,0,0,0.3)',
                            shadowBlur: 1,
                            shadowOffsetX: 2,
                            shadowOffsetY: 2,
                            padding: 5,
                            borderRadius: 5
                        },
                        coord: ['A', 60]
                    }, {
                        coord: ['H', 60]
                    }]
                ]
            },
            areaStyle: {
                normal: {
                    color: {
                        image: bgImg,
                        repeat: 'repeat'
                    },
                }
            },
        }]
    };
    myChart.setOption(option);
    myChart.showLoading();
    $.ajax({
        type : "get",
        async : true,
        url : "/line/one-percent/1",
        data : {},
        dataType : "json",
        success : function(result) {
            if (result.code == 200) {
                myChart.hideLoading();
                if(Array.isArray(option.xAxis)) {
                    result.data.xAxis.forEach(function (item, index) {
                        option.xAxis[index].data = item.data;
                        option.xAxis[index].type = item.type;
                        if (item.name) {
                            option.xAxis[index].name = item.name;
                        }
                    });
                }else {
                    let item = result.data.xAxis[0];
                    option.xAxis.data = item.data;
                    option.xAxis.type = item.type;
                    if (item.name) {
                        option.xAxis.name = item.name;
                    }
                }

                if(Array.isArray(option.yAxis)) {
                    result.data.yAxis.forEach(function (item, index) {
                        option.yAxis[index].type = item.type;
                        option.yAxis[index].name = item.name;
                        if (item.data) {
                            option.yAxis[index].data = item.data;
                        }
                    });
                }else {
                    let item = result.data.yAxis[0];
                    option.yAxis.type = item.type;
                    option.yAxis.name = item.name;
                    if (item.data) {
                        option.yAxis.data = item.data;
                    }
                }

                result.data.series.forEach(function (item, index) {
                    option.series[index].data = item.data;
                    option.series[index].type = item.type;
                    option.series[index].name = item.name;
                });

                if (result.data.legend) {
                    option.legend.data = result.data.legend;
                }
                if (result.data.title) {
                    option.title.text = result.data.title;
                }
                myChart.setOption(option);
            }
        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
</script>
